var dom = document.getElementById('container_eChart');
var myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false
});
var app = {};

var option;

const posList = ['left','right','top','bottom','inside','insideTop','insideLeft','insideRight',
    'insideBottom','insideTopLeft','insideTopRight','insideBottomLeft','insideBottomRight'
];
app.configParameters = {
    rotate: {min: -90, max: 90},
    align: {
        options: {left: 'left',center: 'center',right: 'right'}
    },
    verticalAlign: {
        options: {top: 'top',middle: 'middle',bottom: 'bottom'}
    },
    position: {
        options: posList.reduce(function (map, pos) {
        map[pos] = pos;
        return map;
        }, {})
    },
    distance: {min: 0, max: 100}
};
app.config = {
    rotate: 90,
    align: 'left',
    verticalAlign: 'middle',
    position: 'insideBottom',
    distance: 15,
    onChange: function () {
        const labelOption = {
        rotate: app.config.rotate,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        position: app.config.position,
        distance: app.config.distance
        };
    myChart.setOption({
        series: [
            {label: labelOption},
            {label: labelOption},
            {label: labelOption},
            {label: labelOption}
        ]
    });
}
};
const labelOption = {
    show: true,
    position: app.config.position,
    distance: app.config.distance,
    align: app.config.align,
    verticalAlign: app.config.verticalAlign,
    rotate: app.config.rotate,
    formatter: '{c}  {name|{a}}',
    fontSize: 16,
    rich: {
        name: {}
    }
};
option = {
    title:{text:"研学小组步数统计"},
    tooltip: {trigger: 'axis', axisPointer: {type: 'shadow'}},
    legend: {data: ['穆泽恺', '伍翰文', '张翔']},
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar', 'stack'] },
        restore: { show: true },
        saveAsImage: { show: true }
        }
    },
    xAxis: [
        {
        type: 'category',
        axisTick: { show: false },
        data: ['7-14','7-15','7-16','7-17','7-18']
        }
    ],
    yAxis: [{type: 'value'}],
    series: [
        {
        name: '穆泽恺',
        type: 'bar',
        barGap: 0,
        label: labelOption,
        emphasis: {
            focus: 'series'
        },
        data: [12256,15664,7865,10086,12306]},
        {
        name: '伍翰文',
        type: 'bar',
        label: labelOption,
        emphasis: {
            focus: 'series'
        },
        data:[19403,19186,13749,8316,7597]
        },
        {
        name: '张翔',
        type: 'bar',
        label: labelOption,
        emphasis: {
            focus: 'series'
        },
        data:[19231,21703,11218,16348,10745]
        },
    
    ]
};
if (option && typeof option === 'object') {
    myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);